<template>
    <div 
        id="box" 
        :style="{height:height+'px'}"
        @touchstart="login"
        @touchmove="move"
        @touchend="end"
    >
        <div id="conent" :style="conentObj" ref="conent">
            <slot></slot>
        </div>
        <div 
            id="scroll-bar"
            :style="{
                height:barheight+'px',
                top:barTop+'px'
            }"
        ></div>
       
    </div>
</template>

<script>

export default {
    props:["height","width"],
    data:function(){
        return {
            startY:0,
            conentObj:{transform:'translate(0,0)'},
            currOffsetY:0,
            barheight:0,
            barTop:0,
        }
    },
    computed:{
        // barheight(){
        //     var a = this.$refs.conent.scrollHeight/this.height;
        //     var barheights = this.height*a;
        //     return barheights;
        // },
    },
    methods:{
        login(e){
            // console.log(e.touches[0]);
            this.startY = e.touches[0].pageY;
            this.conentObj.transition = "";
        },
        move(e){
            var currentY = e.touches[0].pageY;
            var offste = currentY-this.startY;
            // console.log(offste);
            if(this.currOffsetY>0){
                offste/=3;
            }
            var maxOffset = -this.$refs.conent.scrollHeight+this.height;
            if(this.currOffsetY<maxOffset){
                offste/=3;;
            }
            this.currOffsetY+=offste;
            this.conentObj.transform = "translate(0,"+this.currOffsetY+"px)";
            this.startY =currentY;

            // 计算滚动条位置
            var ra = this.currOffsetY/maxOffset;
            // console.log(ra)
            // this.barTop = ra*(this.height-this.barheight)
            this.$emit("didScroll",ra);
        },
        end(e){
            if(this.currOffsetY>0){
                this.currOffsetY=0
            }

            var maxOffset = -this.$refs.conent.scrollHeight+this.height;
            if(this.currOffsetY<maxOffset){
                this.currOffsetY =maxOffset;
            }

            this.conentObj.transform = "translate(0,"+this.currOffsetY+"px)";
            this.conentObj.transition = "all 0.7s";

            var ra = this.currOffsetY/maxOffset;
            this.barTop = ra*(this.height-this.barheight);
        },
    },
    mounted:function(){
        var a = this.height/this.$refs.conent.scrollHeight;
        this.barheight = this.height*a;
    }
}
</script>

<style scoped>
    #box{
        overflow: hidden;
        position: relative;
    }

    #conent{
        display: inline-block;
        width: 100%;
    }
    #scroll-bar{
        position: absolute;
        right: 0;
        top:0;
        width: 6px;
        /*height: 12px;*/
        background-color: rgba(0, 0, 0, 0.3);
        transition: opacity 0.7s;
    }
</style>